<template>
	<view id="content" class="content bgc-f0">
		<u-swiper :list="swiperList" mode="number" indicator-pos="topRight" height="320" duration="700">
		</u-swiper>
		<!-- <view class="info">
			<view class="z-flex bgc-fff flex-1 p30 br12">
				<view class="_adr flex-1">
					<view class="fs30 fwb">{{storeInfo.name}}</view>
					<view class="fs24 c-999 mt10">{{storeInfo.address}}</view>
				</view>
				<view class="z-flex z-flex-justify-c" style="width: 100rpx;flex-direction: column;align-items: flex-end;" @click="handDh">
					<u-image src="@/static/images/position.png" width="36" height="34"></u-image>
					<text class="fs24 c-666">导航</text>
				</view>
			</view>
			
		</view> -->
		
		<view class="p20">
			<view class="subtitle"><text class="c-theme">全部项目</text></view>

			<!--全部项目-->
			<view class="_list z-flex z-flex-between" style="flex-wrap: wrap;">
				<template v-for="item in proList">
					<view class="_li" :key="item.id" @click="handViewShop(item.id)">
						<u-image :src="item.cover" width="100%" height="300rpx"></u-image>
						<view class="c-666 fs28 mt12 mb14 u-line-1">{{item.name}}</view>
						<view class="c-red">
							<text class="fs26">￥</text>
							<text class="fs30 ml6">{{item.price}}</text> 
							<!-- <text class="fs24 ml4">元/次</text> -->
						</view>
					</view>
				</template>
			</view>
		</view>
		
		<vempty type="data" v-if="datalen" title="暂无数据"></vempty>
	</view>
</template>

<script>
	import {
		getOneApi,
		productListApi
	} from '@/api/shop.js'
	export default {
		data() {
			return {
				swiperList: [],
				option: {},
				storeInfo: {},
				proList: [],
				datalen: false
			}
		},
		onLoad(option) {
			option && (this.option = option)
		},
		onShow() {
			this.getStoreDetail()
		},
		methods: {
			async getStoreDetail() {
				uni.showLoading({title: '加载中'})
				const {code, data} = await getOneApi({
					id: this.option.id
				})
				if(code != 0) return
				this.swiperList = data.img.map(it=>{return {image: it}})
				this.storeInfo = data
				this.getProList(true)
			},
			async getProList(hide = false) {
				if (!hide) uni.showLoading({title: '加载中'})
				const {code, data} = await productListApi({
					businessId: this.option.id
				})
				if(code != 0) return
				uni.hideLoading()
				this.proList = data.list
				this.datalen = data.list.length === 0
			},
			handViewShop(id) {
				uni.$u.route({
					type: 'navigateTo',
					url: 'mapPages/shop_detail/index',
					params: {
						id,
						businessId: this.option.id
					}
				})
			},
			handDh() {
				return
				// 详情经纬度导航
				let {
					latitude,
					longitude
				} = this.storeInfo
				try {
					if (latitude && longitude) {
						uni.openLocation({
							latitude: latitude * 1,
							longitude: longitude * 1,
							success: function() {
								console.log('success');
							}
						});
					}
				} catch (e) {
					//TODO handle the exception
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.content {
		.info {
			width: 100%;
			padding: 0 30rpx 30rpx;
			transform: translateY(-80rpx);
		}

		._list {
			._li {
				width: 48.5%;
				height: auto;
				background-color: #fff;
				padding: 30rpx;
				border-radius: 12rpx;
				margin-bottom: 24rpx;
			}
		}
	}
</style>
